@using OrchardCore.Liquid.ViewModels;
@model LiquidPartViewModel

<script asp-name="codemirror" depends-on="admin" at="Foot"></script>
<script asp-name="codemirror-mode-javascript" at="Foot"></script>
<script asp-name="codemirror-addon-display-autorefresh" at="Foot"></script>
<script asp-name="codemirror-addon-mode-simple" at="Foot"></script>
<script asp-name="codemirror-addon-mode-multiplex" at="Foot"></script>
<script asp-name="codemirror-mode-xml" at="Foot"></script>
<script asp-src="~/OrchardCore.Liquid/codemirror/liquid.js" at="Foot"></script>

<div class="form-group">
    <label asp-for="Liquid">@T["Body"]</label>
    <textarea asp-for="Liquid" rows="5" class="form-control content-preview-text"></textarea>
    <span class="hint">@T["The body of the content item, in Liquid format."]</span>
</div>

<script at="Foot">
$(function () {
    var textArea = document.getElementById('@Html.IdFor(x => x.Liquid)');

    if (textArea == null) {
        return;
    }

    var editor = CodeMirror.fromTextArea(textArea, {
        autoRefresh: true,
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        mode: { name: "liquid" },
    });

    editor.on('change', function (cm) {
        document.getElementById('@Html.IdFor(x => x.Liquid)').value = cm.getValue();
        $(document).trigger('contentpreview:render');
    });
});
</script>
